<template>
	<view class="content-box">
		<view class="search-box" @click="clickSearchInput">
			<uni-search-bar placeholder="请输入要搜索的音乐" cancelButton="none"></uni-search-bar>
		</view>
		<view class="vidio-list-box">
			<view class="vidio-list" v-for="(vidioItem,index) in vidioList">
				<view class="content-1" @click="skipToPlayVidio(vidioItem.id)" v-if="index == 0">
					<image :src="vidioItem.cover"></image>
					<text>{{vidioItem.name}}</text>
				</view>
				<view class="content-2" v-else @click="skipToPlayVidio(vidioItem.id)">
					<view class="item-box">
						<image :src="vidioItem.cover"></image>
						<view class="play-count">
							<image src="../../static/images/vidioListImg/playcount.png"></image>
							<text>{{vidioItem.playCount}}</text>
						</view>
						<view class="name-publishTime">
							<text>{{vidioItem.name}}</text>
							<text>{{vidioItem.publishTime}}</text>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vidioList: [],
			};
		},
		onLoad() {

			this.getVidioList()
		},
		onShow() {

		},
		methods: {
			// 点击搜索框
			clickSearchInput() {
				uni.navigateTo({
					url: '../searchMusic/searchMusic'
				})

			},
			// 获取视频列表
			getVidioList() {
				uni.request({
					url: 'http://music.jsososo.com/apiMix/mv',
					data: {
						id: 'j00203psvya',
						_p: 'qq',
						_t: '1623249296739'
					},
					success: res => {
						res.data.data.recommend.map((item) => {
							item.publishTime = this.$options.filters['dateFormat'](item.publishTime)

						})
						this.vidioList = res.data.data.recommend

					},
					fail: err => {
						console.log(err)
					}
				})

			},
			// 跳转播放视频
			skipToPlayVidio(id) {
				uni.navigateTo({
					url: '../vidio/vidio?id=' + id
				})
				
			}

		},
		filters: {
			dateFormat(value) {
				let date = new Date(value)
				const year = date.getFullYear()
				const month = (date.getMonth() + 1).toString().padStart(2, "0")
				const day = date.getDate().toString().padStart(2, "0")
				return year + '-' + month + '-' + day
			}
		}
	}
</script>

<style lang="scss">
	.content-box {
		.vidio-list-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: left;

			.vidio-list {

				height: 375rpx;
				margin: 0 auto 10rpx auto;

				// white-space: nowrap;
				.content-1 {

					image {
						width: $unit-box-width;
						height: 375rpx;
						border-radius: 10rpx;

					}

					text {
						display: -webkit-box;
						position: relative;
						top: -70rpx;
						left: 20rpx;
						color: white;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;

					}
				}

				.content-2 {
					border: solid 1px #EBECEE;
					border-radius: 10rpx;

					.item-box {
						width: $unit-box-width/2-20rpx;
						height: 345rpx;

						border-radius: 10rpx;
						font-size: $uni-font-size-base;

						image {
							width: $unit-box-width/2-20rpx;
							height: 200rpx;
							border-radius: 10rpx 10rpx 0 0;
						}

						.play-count {
							position: relative;
							top: -50rpx;
							left: 10rpx;
							color: white;
							display: flex;
							align-items: center;

							image {
								width: 33rpx;
								height: 33rpx;
								margin-right: 5rpx;
							}

						}

						.name-publishTime {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							height: 125rpx;
							position: relative;
							top: -30rpx;
							padding: 0 10rpx;

							text:nth-child(1) {
								height: 75rpx;
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;

							}

							text:nth-child(2) {
								font-size: $uni-font-size-base - 5rpx;
								color: gray;
							}
						}
					}

				}

			}

		}
	}
</style>
